/**
* Copyright (c) 2022 Beijing Jiaotong University
* PhotLab is licensed under [Open Source License].
* You can use this software according to the terms and conditions of the [Open Source License].
* You may obtain a copy of [Open Source License] at: [https://open.source.license/]
* 
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* 
* See the [Open Source License] for more details.
* 
* Author: Zhenjie Wei
* Created: Mar. 22, 2023
* Supported by: National Key Research and Development Program of China
*/

@mixin component-drawer-content {
    height: 100%;
    .component-content {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        box-sizing: border-box;
        .tree-content {
            flex: 1;
            flex-shrink: 0;
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
            border-bottom: 10px solid $border_light;
            overflow-y: auto;
            .pui-tree {
                .pui-tree_box {
                    border: none;
                    .pui-tree-children {
                        .pui-tree-children_content {
                            .pui-tree-children_content-list {
                                .pui-tree-children_content-item {
                                    overflow: hidden;
                                }
                            }
                        }
                    }
                }
            }
        }
        .file-content {
            flex: 1;
            box-sizing: border-box;
            width: 100%;
            position: relative;
            overflow-y: auto;
            .file-info {
                box-sizing: border-box;
                .category-list {
                    .title {
                        font-size: 14px;
                        font-weight: 700;
                        color: $primary;
                        padding: 10px;
                        
                    }
                }
                .file-info-item {
                    width: 100%;
                    padding: 10px;
                    font-size: 12px;
                    display: flex;
                    justify-content: space-between;
                    box-sizing: border-box;
                    &:nth-child(2n - 1) {
                        background: $bg-tool_light;
                    }
                    .name {
                        width: 150px;
                        flex-shrink: 0;
                        font-size: 12px;
                    }
                    .value {
                        flex: 1;
                        font-size: 12px;
                        word-break: break-all;
                    }
                    &.file-info-header {
                        font-weight: bold;
                        background: $bg-fill_light;
                        position: sticky;
                        top: 0;
                    }
                }
            }
        }
    }
    .pui-tabs {
        width: 100%;
        border-radius: 0px;
        border-right: 0;
        border-left: 0;
        border-bottom: 0;
        .pui-tabs_content {
            width: 100%;
            .pui-tab {
                padding: 0;
                margin: 0;
                &.active-tab {
                    &:nth-child(2) {
                        border-left: none !important;
                    }
                }
            }
        }
    }
}

@mixin component-drawer-content-dark {
    .component-content {
        .tree-content {
            border-bottom: 10px solid $border_dark;
            .pui-tree {
                .pui-tree_box {
                    .pui-tree-children {
                        .pui-tree-children_content {
                            .pui-tree-children_content-list {
                                .pui-tree-children_content-item {
                                }
                            }
                        }
                    }
                }
            }
        }
        .file-content {
            .parameter-tab {
                .file-info {
                    .file-info-item {
                        &:nth-child(2n - 1) {
                            background: $bg-tool_dark;
                        }
                        &.file-info-header {
                            background: $bg-selected_dark;
                        }
                    }
                }
            }
            .information-tab {
                .information-content {
                    color: $text_dark;
                }
            }
        }
    }
    .pui-tabs {
        .pui-tabs_content {
            .pui-tab {
                &.active-tab {
                    background: $bg-home_dark !important;
                    &:nth-child(2) {
                    }
                }
                &:hover {
                    background: $bg-home_dark !important;
                }
            }
        }
    }
}
